<template>
	<view>
		<NavSearch :isCity='true' @confirm='confirm' :locaAddress='mixinDistrict' @handleSearch='handleSearch'
			v-model='searchValue'></NavSearch>
		<view class="tab_list">
			<u-tabs v-if="isShowTabs" name='typeName' style="width: 100%;" active-color='#FF0E3D' :bar-style='barStyle'
				:list="listTab" :is-scroll="true" :current="current" @change="change"></u-tabs>
			<view class="icon_list_box">
				<u-icon @click="handShowType" name='list' size='32' class="icon_list"></u-icon>
			</view>
		</view>
		<view class='u-border-top' style='padding: 20rpx 0'>

			<TypeScreen :price='price' :distance='distance' :salesVolume='salesVolume' @handleSort='handleSort'>
			</TypeScreen>
		</view>
		<u-empty v-if="list.length==0"></u-empty>
		<view class="goods_list" v-else>
			<GoodsItemRow @handNavToDetails='handNavToDetails(item)' v-for="(item,index) in list" :key='index'
				:item="item"></GoodsItemRow>
			<u-loadmore :status="status" style="width: 100%;" />
		</view>
		<TypeModel @handClose='handClose' :show.sync='show' :list='listTab'></TypeModel>
	</view>
</template>

<script>
	import NavSearch from '../index/components/NavSearch.vue'
	import TypeScreen from './components/TypeScreen.vue'
	import GoodsItemRow from '../../components/ZY-Goods-item-row/ZY-Goods-item.vue'
	import TypeModel from './components/TypeModel.vue'
	import initData from '@/mixin/initData.js'
	import getLocationInfo from '@/mixin/getLocationInfo.js'
	export default {
		components: {
			TypeModel,
			NavSearch,
			TypeScreen,
			GoodsItemRow
		},
		mixins: [initData, getLocationInfo],
		computed: {
			// listTab5: {
			// 	get() {
			// 		return this.listTab.slice(0, 7)
			// 	},
			// 	set(val) {
			// 		console.log(val, 'val')
			// 	}
			// 	// return this.listTab
			// }
		},
		data() {
			return {
				searchValue: '',
				listTab5: [],
				show: false,
				barStyle: {
					backgroundColor: 'transparent',
					width: '0',
					height: '0',
					'border-left': '10rpx solid transparent',
					'border-right': '10rpx solid transparent',
					'border-top': '20rpx solid #FF0E3D',
					bottom: '-20rpx',
					marginLeft: '10rpx'
				},
				listTab: [],
				current: 0,
				url: '',
				goodsTypeId: '',
				isShowTabs: true,
				lng: '',
				lat: '',
				distance: 'asc', //价格 asc升序 desc降序 距离 asc升序 desc降序
				salesVolume: '', //销量 asc升序 desc降序
				price: '', //价格 asc升序 desc降序 
				locaAddress: ''
			};
		},
		onLoad(e) {
			this.getLocationInfo().then(res => {
				const {
					pcd,
					latitude,
					longitude,
					address
				} = res
				this.pcd = pcd
				this.mixinDistrict = address.district
				this.lng = longitude
				this.lat = latitude
				console.log(e, 'ee')
				if (e) {
					this.apiUrl = e.url;
				}
				this.getGoodsTypeList()
				this.miXinInit()
			}).catch(err => {

				this.mixinDistrict = ''
				this.pcd = ''
				this.miXinInit()
			})

		},
		onShow() {

		},
		methods: {
			confirm(val, vals) {
				console.log(vals)
				this.mixinDistrict = val
				this.pcd = vals
				this.toReset()
				this.miXinInit()
			},
			handNavToDetails(item) {
				uni.navigateTo({
					url: '/pages/followShop/goodsDetail/goodsDetail?id=' + item.id,
					fail(e) {
						console.log(e)
					}
				})
			},
			handleSort(typeKey, typeArr) {
				this[typeKey] = this[typeKey] == 'asc' ? 'desc' : 'asc'
				typeArr.forEach(item => {
					this[item] = ''
				})
				this.toReset()
				this.miXinInit()
			},
			handleSearch() {
				console.log('测试', this.searchValue)
				this.toReset()
				this.miXinInit()
				// uni.navigateTo({
				// 	url: '/pages/search/search?val=' + this.searchValue+'&'
				// })
			},
			getGoodsTypeList() {
				this.$u.api.getGoodsTypeList().then(res => {
					this.listTab = res
					this.listTab.unshift({
						"id": -1,
						"imgUrl": null,
						"typeName": "首页",
						"createTime": -1
					}, {
						"id": -1,
						"imgUrl": null,
						"typeName": "全部",
						"createTime": -1
					})
					this.current = 1
					this.listTab5 = res.slice(0, 7)
				})
			},
			// 请求前的参数处理
			beforeInit() {
				// this.apiUrl = e.url;
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					goodsTypeId: this.goodsTypeId,
					lng: this.lng,
					lat: this.lat,
					distance: this.distance,
					salesVolume: this.salesVolume,
					price: this.price,
					areaName: this.pcd,
					title: this.searchValue
				};
				this.params = {
					...params
				};
			},
			handShowType() {
				this.show = true
			},
			handClose(id, index) {
				this.show = false
				// if (id == this.goodsTypeId) {
				// 	return
				// }
				// const isTab = this.listTab5.find(item => {
				// 	return item.id == id
				// })
				// if (isTab) {
				// 	this.current = index
				// } else {
				// 	this.isShowTabs = false
				// 	// this.listTab5.splice(2, 1, this.listTab.find(item => item.id == id))
				// 	this.$set(this.listTab5, 2, this.listTab.find(item => item.id == id))
				// 	this.current = 2
				// 	this.isShowTabs = true
				// }
				// console.log(this.listTab5, '是否更新')
				this.current = index
				this.goodsTypeId = id
				this.toReset()
				this.miXinInit()
			},
			change(index) {

				if (index === 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					this.current = index;
					this.goodsTypeId = index == 1 ? '' : this.listTab[index].id
					this.toReset()
					this.miXinInit()
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods_list {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.tab_list {
		display: flex;
		padding-right: 20rpx;
		margin-top: 20rpx;
		position: relative;

		.icon_list_box {
			position: absolute;
			right: 10rpx;
			top: 25rpx;
			// transform: translate(-50%, -50%);
			z-index: 99;
			background-color: #fff;

		}

		.icon_list {}
	}
</style>
